<!DOCTYPE html>
<html>

<head>
    <title>数据分析报告(compare)</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        .container {
            border: 1px solid #ddd;
            padding: 20px;
        }

        h1 {
            text-align: center;
            margin-bottom: 30px;
        }

        h2 {
            margin-top: 30px;
            margin-bottom: 20px;
        }

        ul {
            list-style-type: none;
            padding: 0;
            margin-bottom: 20px;
        }

        ul li {
            margin-bottom: 10px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        table th,
        table td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        table th {
            background-color: #f5f5f5;
        }

        .chart-container {
            text-align: center;
            margin-top: 30px;
        }
    </style>

    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts-wordcloud@2.1.0/dist/echarts-wordcloud.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
</head>

<body>
<div class="container">
    <h1 style="color:rgb(0, 0, 0) ; font-size:60px"><strong>数据分析报告(compare)</strong></h1>

    <div class="section">
        <h2 style="color:rgb(0, 0, 0) ; font-size:40px"><strong>项目1信息：</strong></h2>
        <ul>
            <li><strong>项目1名称:</strong> {{.Title1}}</li>
            <li>
                <strong>项目1链接:</strong>
                <a href="{{.Source1}}"
                >{{.Source1}}</a
                >
            </li>
        </ul>
    </div>

    <div class="section">
        <h2 style="color:rgb(0, 0, 0) ; font-size:40px"><strong>项目2信息：</strong></h2>
        <ul>
            <li><strong>项目2名称:</strong> {{.Title2}}</li>
            <li>
                <strong>项目2链接:</strong>
                <a href="{{.Source2}}"
                >{{.Source2}}</a
                >
            </li>
        </ul>
    </div>


    {{ range $key, $value := .Data }}

    <div class="section">
        <h2 style="color:rgb(0, 0, 0) ; font-size:40px"><strong>{{$key}}各月份对比：</strong></h2>
        <div id="chart">
            <!-- 可视化图表将在这里插入 -->
            <div class="select" style="margin-right:20px; margin-top:20px; position:fixed; right:20px;"></div>

            <div class="item" id="{{$key}}" style="width:1200px;height:600px;"></div>

            <script type="text/javascript">

                var dates = [{{ range $.Dates }}"{{ . }}",{{ end }}];
                var data1 = [{{ range $value.Data1 }}"{{ . }}",{{ end }}];
                var data2 = [{{ range $value.Data2 }}"{{ . }}",{{ end }}];

                "use strict";
                var myChart = echarts.init(document.getElementById('{{$key}}'), "white");
                var option = {
                    title: {},
                    tooltip: {},
                    legend: {},
                    xAxis: {
                        type: 'category',
                        data: dates,
                        boundaryGap: true,
                        axisTick: {
                            alignWithLabel: true
                        }
                    },
                    yAxis: [{"axisLabel":{"show":true},"splitArea":{"show":false,},"splitLine":{"show":false,}}],
                    series: [
                        {"name":"{{$.Title1}}","type":"bar","data":data1,"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
                        {"name":"{{$.Title2}}","type":"bar","data":data2,"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
                    ],
                    color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
                };
                myChart.setOption(option);
            </script>
        </div>
    </div>



        {{ end }}

</div>
</body>
</html>
